<template>
  <div>
    <div style="float: left; width: 10%;border: solid #fff"></div>
    <div style="float: left; width: 40%;border: solid #fff">
      <img :src="img" style="width: 100%;">
    </div>
    <div style="float: left; width: 4%;border: solid #fff"></div>
    <div style="float: left; width: 40%">
      <h3>{{ product.productName }}<span style="color:red;">{{ productRuleAttrCenter.sku }}</span></h3>
      <div style="width: 90%; height: 110px;background-color: #97a8be">
        <span style="color: #fff;font-size: 25px">京东价:</span><span style="color: #fff; font-size: 35px;float: right;text-decoration: line-through">{{productRuleAttrCenter.price}}</span>
        <hr>
        <span style="color: #fff;font-size: 25px">促 销:</span><span style="color: red;font-size: 50px;float: right">{{productRuleAttrCenter.sellingPrice}}</span>
      </div>
      <div>
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item v-for="(attr,index) in attrRadio" :label="attr.label">
              <el-radio-group v-model="attr.radio" @change="cutAttr(index)">
                <el-radio-button v-for="value in attr.values" :label="value"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="onSubmit">立即购买</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { getProductDetails } from '@/api/product/product'

export default {
  name: 'Index',
  data() {
    return {
      img: '',
      productId: '',
      productRuleAttrCenters: [],
      productRuleAttrCenter: {},
      attrValues: [],
      product: {},
      attrRadio: []
    }
  },
  created() {
    this.searchProduct();
  },
  methods: {
    searchProduct() {
      this.productId = this.$route.query.productId
      getProductDetails(this.productId).then(response => {
        this.product = response.data.product;
        this.productRuleAttrCenters = response.data.productRultAttrCenters;
        this.productRuleAttrCenter = this.productRuleAttrCenters[0];
        this.img = this.productRuleAttrCenter.image;
        this.attrValues = JSON.parse( response.data.productRule.rultAttr);
        let attrValues = [];
        this.attrValues.forEach((attr,index) => {
          let attrValue = {
            label: attr.key,
            values: attr.values,
            radio: ''
          };
          attrValues.push(attrValue);
        })
        this.attrRadio = attrValues;
        let values = this.productRuleAttrCenter.sku.split(",")
        values.forEach((value,index) => {
          this.attrRadio[index].radio = value;
        })
      })
    },
    cutAttr(index) {
      let values = '';
      this.attrRadio.forEach((attr) => {
        values+=","+attr.radio;
      })
      values = values.substring(1);
      this.productRuleAttrCenters.forEach((attr) => {
        // alert(attr.sku)
        if (values == attr.sku){
          this.productRuleAttrCenter = attr;
        }
      })
      this.img = this.productRuleAttrCenter.image;
    },
    onSubmit() {
      this.$router.push({ path: '/orders/details/index', query: {id : this.productRuleAttrCenter.id}})
    }
  }
}
</script>

<style scoped>

</style>
